<template>
    <div>
        <div ref="main" style="width: 100%;height: 400px;"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    chartsColor: {
        type: String,
        default: '#5470c6'
    },
    chartsType: {
        type: String,
        default: 'bar'
    },
})
const data = reactive({
    option: {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }
        ]
    }
})
const main = ref(null)
onMounted(() => {
    initCharts()
})
function initCharts() {
    var myChart = echarts.init(main.value);
    myChart.setOption(data.option);
    // 图表响应式
    // window.addEventListener('resize', () => {
    //     myChart.resize()
    // })
    window.onresize = () => {
        myChart.resize()
        //如果有多个表变动在下方依次写下去就可以了
    }
}
</script>
  
<style scoped></style>
  